<script setup lang="ts">
import Layout from './Layout.vue';
import WProvider from './w-provider.vue';
</script>

<template>
  <n-config-provider class="h-full">
    <WProvider>
      <Layout />
    </WProvider>
  </n-config-provider>
</template>

<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  :deep(.layout-sider) {
    padding: 5px 5px;
    height: 100%;
    border-left: 1px solid var(--n-border-color);
  }
  .layout-body {
    width: 100%;
    height: 100%;
    flex: 1;
  }
  .toolbars {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }
  .toolbar-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    height: 100%;
    &:last-child {
      justify-content: flex-end;
    }
  }
  .form-props {
    .label {
      :deep(label) {
        text-align-last: justify;
        text-align: justify;
      }
    }
  }
}
</style>
